<template>
	<div class="shouye">
		<Head />
		<div class="img">
			<!-- 跳转到推广 -->
			<img src="../assets/img/cai.png" alt="" class="imgs" @click="aae" />
		</div>
		<div class="shouyi">
			<div class="shouyi-top">
				<img src="../assets/img/308.png" alt="" class="img2" />
				<span>近期收益</span>
			</div>
			<div id="main" :style="{ width: '100%', height: '100%' }" ref="myCharts" class="echarts"></div>
			<div class="wuu" v-if="shows">
				暂无数据
			</div>
		</div>
		<div class="Ranking">
			<div class="shouyi-top Ranking-top">
				<img src="../assets/img/308.png" alt="" class="img2" />
				<span>专家排行榜</span>
			</div>
			<div class="shan">
				<!-- 银牌 -->
				<div class="ying" v-if="qsan.length != 0">
					<img :src="qsan[1].Logo" alt="" />
					<img src="../assets/img/7728.png" alt="" />
					<p v-text="qsan[1].NickName"></p>
					<p>
						收益:<span v-text="qsan[1].Money"></span>
					</p>
				</div>
				<!-- 金牌 -->
				<div class="jing" v-if="qsan.length != 0">
					<img :src="qsan[0].Logo" alt="" />
					<img src="../assets/img/7727.png" alt="" />
					<p v-text="qsan[0].NickName"></p>
					<p>
						收益:<span v-text="qsan[0].Money"></span>
					</p>
				</div>
				<!-- 铜牌 -->
				<div class="tong" v-if="qsan.length != 0">
					<img :src="qsan[2].Logo" alt="" />
					<img src="../assets/img/7729.png" alt="" />
					<p v-text="qsan[2].NickName"></p>
					<p>
						收益:<span v-text="qsan[2].Money"></span>
					</p>
				</div>
			</div>
			<div>
				<div v-for="item in list" :key="item.id" class="list">
					<div>
						<div class="list-box">{{ item.Number}}</div>
						<img :src="item.Logo" alt="" class="list-img" />
						<span class="list-span1">{{ item.NickName }}</span>
					</div>
					<span class="list-span2">{{ item.Money }}</span>
				</div>
			</div>
		</div>
		<div class="box-jia"></div>
		<div class="footer">
			<router-link class="zy" to="/index">
				<img src="../assets/img/24606.png" alt="" />
				<p>主页</p>
			</router-link>
			<router-link class="sy" to="/profit">
				<img src="../assets/img/24607.png" alt="" />
				<p>收益</p>
			</router-link>
			<router-link class="tg" to="/extension">
				<img src="../assets/img/24608.png" alt="" />
				<p>推广</p>
			</router-link>
		</div>
	</div>
</template>

<script>
	import echarts from "echarts";
	import Head from "../components/Head.vue";
	import local from "@/utils/local";

	import {
		ProfitList,
		getList,
		getUser
	} from "../api/index.js"
	export default {
		components: {
			Head
		},
		name: "",
		data() {
			return {
				shows: false,
				myCharts: null,
				arr: [],
				arr2: [],
				qsan: [],
				list: [],
				geren: {},
				echlimit: 7,
				axisx: 0,
				keyy: "lizxlylwkdqzymyzsqblt666",
				IVv: "txwl888txwl20201",
				str: `xstxwl.${local.get("t-k")}.${local.get("Code").Id}.${
        local.get("Code").LoginCode}.txwl999`,
			};
		},
		mounted() {
			setTimeout(() => {
				this.drawLine(); // 调用绘图函数
			}, 500);
			this.init()
		},

		methods: {
			// 跳转到推广
			aae() {
				this.$router.replace("/extension");
			},
			
			init() {
				let query = {
					StartTime: "",
					EndTime: "",
					Limit: this.echlimit,
				}
				// 近期收益
				ProfitList(query).then(res => {
					// console.log(res, '哈哈哈哈哈哈');					
					let Data = res.Data;					
					if (res.Code == 200) {
						if (Data.length == 0 || Data.length == null) {
							this.shows = true
						} else {
							for (let i = 0; i < Data.length; i++) {
								this.arr.push(Data[i].Money);
								this.arr2.push(Data[i].TimeFormat);
							}
						}

					}else{
						alert(res.Message);
					}

				}).catch((err) => {
					console.log(err);
				});
				
				// 专家排行榜
				getList(query).then(res =>{
					// console.log(res,'1111111');
					let data = res.Data;
					if (res.Code == 200) {
						let _this = this;
						_this.qsan = data.slice(0, 3);
						this.list = data.slice(3, 11);
						return;
					}
				})
			},
			
			// 折线图
			drawLine() {
				// 初始化
				let myCharts = echarts.init(this.$refs.myCharts);
				// let myCharts = echarts.init(document.getElementById('main'));

				//   写配置
				let option = {
					tooltip: {
						trigger: "axis",
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					label: {
						show: true,
					},
					xAxis: {
						// show: true,
						position: 'top',
						boundaryGap: true,
						type: 'category',
						nameTextStyle: {
							color: '#BBBBBB'
						},

						axisLabel: {
							color: '#BBBBBB',
						},
						axisTick: { //y轴刻度线
							show: false,
							alignWithLabel: true
						},
						axisLine: { //y轴
							show: false,

						},
						splitLine: {
							show: true
						},
						data: this.arr2.sort(),
					},
					yAxis: {
						show: true,
						type: 'value',
						splitLine: {
							show: true
						}, //去除网格线

						axisLabel: {
							color: '#BBBBBB',
						},
						axisTick: { //y轴刻度线
							show: false,
							alignWithLabel: true
						},
						axisLine: { //y轴
							show: false,
						},
					},
					series: [{
						symbol: 'none',
						type: 'line',
						smooth: true,
						itemStyle: {
							normal: {
								// color: "#386db3", //折线点的颜色
								lineStyle: {
									color: "#FF8500", //折线的颜色
								}
							},
						},
						data: this.arr,
					}]
				};
				// 使用配置生成报表
				myCharts.setOption(option);
			},

		},
		created() {
			getUser().then(res =>{
				// console.log(res,'2222222');
				let Data = res.Data
				if(res.Code == 200 ){
					if (Data.Tx_Type == 1) {
						this.axisx = 1;
						this.echlimit = 30;
					} else if (Data.Tx_Type == 2) {
						this.axisx = 0;
						this.echlimit = 7;
					}
				}else{
					console.log(res.Message);
				}
			})
			
		},
	};
</script>

<style lang="less" scoped>
	.box-jia {
		width: 100%;
		height: 50px;
	}

	.zy>p {
		color: #374ef2 !important;
	}

	.zy,
	.tg,
	.sy {
		width: 10%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-decoration: none;
	}

	.footer img {
		width: 1.37rem;
	}

	.footer p {
		font-size: 0.5rem;
		color: #707070;
	}

	.footer {
		width: 100%;
		height: 50px;
		position: fixed;
		background-color: #fff;
		bottom: 0;
		left: 0;
		z-index: 2;
		display: flex;
		justify-content: space-evenly;
	}

	.list-span1 {
		// width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}

	.list-img {
		width: 1.87rem;
		height: 1.87rem;
		background: #c7c7cc;
		border-radius: 50%;
		margin-right: 1.5rem;
	}

	.list>div:first-child {
		display: flex;
		width: 90%;
		height: 100%;
		align-items: center;
	}

	.list-box {
		width: 1.2rem;
		height: 1.2rem;
		background: #ffe8de;
		border-radius: 50%;
		color: #ff6c00;
		text-align: center;
		font-size: 0.9rem;
		font-weight: 400;
		margin-right: 5%;
	}

	.Ranking>div:nth-child(3) {
		width: 100%;
		padding-right: 1.9rem;
		padding-left: 1.9rem;
		box-sizing: border-box;
	}

	.list {
		width: 100%;
		height: 3.5rem;
		border-top: 1px #e6e6e6 solid;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list:first-child {
		border: 0px;
	}

	.tong>img:first-child {
		width: 2.9rem;
		height: 2.9rem;
		border-radius: 50%;
		border: 3px #e6ae88 solid;
		margin-bottom: 0.7rem;
		margin-top: 0.8rem;
	}

	.tong>img:nth-child(2) {
		position: absolute;
		right: 0.9rem;
		top: 0.5rem;
	}

	.jing>img:first-child {
		width: 3.8rem;
		height: 3.8rem;
		border-radius: 50%;
		border: 3px #ffca2c solid;
		margin-bottom: 0.6rem;
		margin-top: 0.18rem;
	}

	.jing>img:nth-child(2) {
		position: absolute;
		right: 0.18rem;
		top: -0.18rem;
	}

	.ying>img:first-child {
		width: 2.9rem;
		height: 2.9rem;
		border-radius: 50%;
		border: 0.18rem #e2e2e2 solid;
		margin-bottom: 0.7rem;
		margin-top: 0.6rem;
	}

	.ying>img:nth-child(2) {
		position: absolute;
		right: 0rem;
		top: 0rem;
	}

	.ying>p:nth-child(3),
	.jing>p:nth-child(3),
	.tong>p:nth-child(3) {
		font-size: 1rem;
		font-weight: 400;
		color: #232323;
		margin-bottom: 9px;
		width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		text-align: center;
	}

	.ying>p:nth-child(4),
	.jing>p:nth-child(4),
	.tong>p:nth-child(4) {
		font-size: 0.8rem;
		font-weight: 400;
		color: #374ef2;
	}

	.ying,
	.jing,
	.tong {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.shan {
		width: 100%;
		height: 8.5rem;
		display: flex;
		justify-content: space-evenly;
	}

	.shan>div {
		// width: 20%;
		height: auto;
	}

	.Ranking-top {
		margin-bottom: 5px;
	}

	.Ranking {
		width: 100%;
		height: 39.5rem;
		background-color: #fff;
		border-radius: 4px;
		padding-top: 12px;
		box-sizing: border-box;
		margin-bottom: 10px;
	}

	.echarts {
		position: absolute;
		top: 7%;
		padding-left: 4%;
		box-sizing: border-box;
	}

	.shouyi-top {
		display: flex;
		align-items: center;
	}

	.shouyi-top>span {
		font-size: 1.1rem;
		font-weight: 500;
		color: #5f5f61;
	}

	.shouyi {
		width: 100%;
		height: 16.5rem;
		background: #ffffff;
		border-radius: 4px;
		padding-top: 0.75rem;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 0.9rem;
	}

	.wuu {
		width: 100%;
		text-align: center;
		height: 10.25rem;
		line-height: 10.25rem;
		font-size: 1rem;
		color: #CCCCCC;
	}

	.img2 {
		width: 0.25rem;
		height: 1.43rem;
		margin-right: 0.7rem;
	}

	.img {
		width: 100%;
		height: 5.6875rem;
		// display: block;
		overflow: hidden;
		margin-bottom: 1.125rem;
		box-shadow: 0px 3px 6px rgba(58, 83, 242, 0.67);
	}

	.imgs {
		width: 100%;
		object-fit: fill;
		object-fit: contain;
		object-fit: scale-down;
		object-fit: cover;
	}

	.shouye {
		width: 100%;
		padding-left: 3%;
		padding-right: 3%;
		padding-top: 3%;
		background: #f7f7f7;
		box-sizing: border-box;
		position: relative;
	}

	.top {
		width: 100%;
		height: 2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.top>img {
		width: 9%;
		height: 100%;
	}

	.top>span {
		font-size: 1.3rem;
		font-weight: bold;
		color: #333333;
	}
</style>
